<template>
  <div id="baidu_map_container"></div>
</template>

<script setup>
import { reactive ,onMounted, watch, ref} from 'vue';
import {init,drawingInit} from "./js/commonHander"
import coverHander from "./js/coverHander"

const baidu = ref({})
const drawing = ref({})


/** 变量区 */
const state = reactive({

    cover:{
      popup:null,
      markers:[],
      polylines:[],
      polygons:[],
      circles:[],
    },
})
var cover = null

/** 方法区 start */
function opDrawing(darwingType){
  drawing.value.setDrawingMode(darwingType)
  drawing.value.open()
}

function closeDrawing(){
  drawing.value.close()
}
/** 方法区 end */

/** 初始化 */
onMounted(() => {
  
  baidu.value = init({
    containerId:"baidu_map_container",
    centerPoint:[110.038365,40.416049],
    
    defaultZoom:9,
    minZoom:10,
    maxZoom:19, 
    zoom:undefined,

    soucre:{
      imgext:'.png',
      tiles_dir:'https://model.xiaoweikj.cn:51111/baidu/neimeng/baidumaps/roadmap/'
    },
    // soucre:{
    //   imgext:'.png',
    //   customstyle:'',
    //   tiles_dir:'http://localhost:58888/street/baidumaps/roadmap',
    //   tiles_road_dir:'',
    //   tiles_satellite_dir:'http://localhost:58888/satellite',
    //   tiles_v_dir:''  
    // },
  })

  cover = coverHander(baidu.value,state.cover)

  drawing.value = drawingInit(baidu.value,(data)=>{

    console.log("绘制完成",data);

  })

  window.addEventListener('message', (event) => {
    console.log('iframe通信数据', event)
  })


  cover.loadMarkers([
    {
      longitude:110.02588255173035,
      latitude:40.4129326141051,
      icon:'https://bpic.51yuansu.com/pic2/cover/00/31/10/5810a347435b5_610.jpg',
      event:true,
    },
    {
      longitude:110.52588255173035,
      latitude:40.6129326141051,
      icon:'https://bpic.51yuansu.com/pic2/cover/00/31/10/5810a347435b5_610.jpg',
      event:true,
    }
  ])

  cover.loadDynamiclines([
    {
        "lng": 109.621142,
        "lat": 40.80291
    },
    {
        "lng": 109.043927,
        "lat": 40.3153
    },
    {
        "lng": 110.133967,
        "lat": 39.864888
    },
    {
        "lng": 110.495014,
        "lat": 39.972907
    }
  ])

  cover.loadPolygons([
    {
        "lng": 110.122468,
        "lat": 40.668211
    },
    {
        "lng": 110.564003,
        "lat": 40.823878
    },
    {
        "lng": 111.060731,
        "lat": 40.364574
    },
    {
        "lng": 110.800869,
        "lat": 40.096651
    },
    {
        "lng": 109.844209,
        "lat": 40.38568
    },
    {
        "lng": 110.122468,
        "lat": 40.668211
    }
])
  
})


defineExpose({
  cover
})

</script>
<style lang='less' scoped>
  #baidu_map_container{
    width: 100%;
    height: 100%;

  }

</style>
  